﻿
$(function () {
// echarts_1();
echarts_2();
echarts_3();
// echarts_31();
// echarts_32();
// echarts_33();
echarts_4();
// echarts_5();

// echarts_7();
echarts_8();
function echarts_1() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart1'));

        option = {
        // backgroundColor: '#00265f',
		legend: {
	        data: ['去年', '本年']
	    },
	    tooltip: {
	        trigger: 'axis',
	        axisPointer: {
	            type: 'shadow'
	        }
	    },
    grid: {
        left: '0%',
		top:'10px',
        right: '0%',
        bottom: '4%',
       containLabel: true
    },
    xAxis: [{
        type: 'category',
      	data: ['11月','12月','1月', '2月', '3月', '4月'],
        axisLine: {
            show: true,
            lineStyle: {
                color: "rgba(255,255,255,.1)",
                width: 1,
                type: "solid"
            },
        },
        axisTick: {
            show: false,
        },
		axisLabel:  {
                interval: 0,
                // rotate:50,
                show: true,
                splitNumber: 15,
                textStyle: {
 					color: "rgba(255,255,255,.6)",
                    fontSize: '12',
                },
            },
    }],
    yAxis: [{
        type: 'value',
        axisLabel: {
           // formatter: '{value} %'
			show:true,
			 textStyle: {
 					color: "rgba(255,255,255,.6)",
                    fontSize: '12',
                },
        },
        axisTick: {
            show: false,
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: "rgba(255,255,255,.1	)",
                width: 1,
                type: "solid"
            },
        },
        splitLine: {
            lineStyle: {
               color: "rgba(255,255,255,.1)",
            }
        }
    }],
    series: [
		{
			name: '去年',
			type: 'bar',
			data: [200, 300, 300, 900, 1500, 1200, 600],
			barWidth:'20%', // 柱子宽度
			// barGap: 1, //柱子之间间距
	        itemStyle: {
	            normal: {
	                color:'#2f89cf',
	                opacity: 1,
					barBorderRadius: 5,
	            }
	        }
		},
		{
			name: '本年',
			type: 'bar',
			data: [200, 300, 300, 900, 1500, 1200, 600],
			barWidth:'20%', // 柱子宽度
			// barGap: 1, //柱子之间间距
	        itemStyle: {
	            normal: {
	                color:'red',
	                opacity: 1,
					barBorderRadius: 5,
	            }
	        }
		}
		
	]
};
      
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }
function echarts_2() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart2'));

        option = {
        		// backgroundColor: '#00265f',
        		tooltip: {
        			trigger: 'axis',
        			axisPointer: { type: 'shadow'}
        		},
        		grid: {
        			left: '2%',
        			top:'10px',
        	        right: '2%',
        	        bottom: '4%',
        	        containLabel: true
        	    },
			    xAxis: {
		        	type: 'category',
		      		axisLine: {
		            show: true,
		            lineStyle: {
		                color: "rgba(255,255,255,.1)",
		                width: 1,
		                type: "solid"
		            },
		      		},
				
			        axisTick: {
			            show: false,
			        },
			        axisLabel:  {
		                interval: 0,
		               // rotate:50,
		                show: true,
		                splitNumber: 15,
		                textStyle: {
		 					color: "rgba(255,255,255,.6)",
		                    fontSize: '12',
		                },
		            },
			        data: ['1月', '2月', '3月', '4月']
			    },
			    yAxis: {
			        type: 'category',
			        axisLabel: {
			            //formatter: '{value} %'
			 			show:true,
			 			 textStyle: {
			  					color: "rgba(255,255,255,.6)",
			                     fontSize: '12',
			                 },
			         },
			         
			    },
			    series: [
					{
			       
			        type: 'line',
			        data: [{value: 120, itemStyle: {color: '#c23531'}},
			               {value: 200, itemStyle: {color: '#c23531'}},
			               {value: 100, itemStyle: {color: '#61a0a8'}},
			               {value: 80, itemStyle: {color: '#d48265'}}
			               ],
			        barWidth:'35%', // 柱子宽度
			        // barGap: 1, //柱子之间间距
			        itemStyle: {
			            normal: {
			                color:'#27d08a',
			                opacity: 1,
							barBorderRadius: 5,
			            }
			        }
					}
				]
        };
      
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }
function echarts_5() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart5'));

       option = {
  // backgroundColor: '#00265f',
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    
    grid: {
        left: '0%',
		top:'10px',
        right: '0%',
        bottom: '2%',
        containLabel: true
    },
    xAxis: [{
        type: 'category',
      		data: ['', '', '', '', '', '', '', ''],
        axisLine: {
            show: true,
         lineStyle: {
                color: "rgba(255,255,255,.1)",
                width: 1,
                type: "solid"
            },
        },
		
        axisTick: {
            show: false,
        },
		axisLabel:  {
                interval: 0,
               // rotate:50,
                show: true,
                splitNumber: 15,
                textStyle: {
 					color: "rgba(255,255,255,.6)",
                    fontSize: '12',
                },
            },
    }],
    yAxis: [{
        type: 'value',
        axisLabel: {
           // formatter: '{value} %'
			show:true,
			 textStyle: {
 					color: "rgba(255,255,255,.6)",
                    fontSize: '12',
                },
        },
        axisTick: {
            show: false,
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: "rgba(255,255,255,.1	)",
                width: 1,
                type: "solid"
            },
        },
        splitLine: {
            lineStyle: {
               color: "rgba(255,255,255,.1)",
            }
        }
    }],
    series: [{
        type: 'bar',
        data: [2, 3, 3, 9, 15, 12, 6, 4, 6, 7, 4, 10],
        barWidth:'35%', // 柱子宽度
       // barGap: 1, //柱子之间间距
        itemStyle: {
            normal: {
                color:'#2f89cf',
                opacity: 1,
				barBorderRadius: 5,
            }
        }
    }
	]
};
      
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }
	
function echarts_4() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart4'));

        option = {
		    tooltip: {
		        trigger: 'axis',
		        axisPointer: {
		            lineStyle: {
		                color: '#dddc6b'
		            }
		        }
		    },
		    legend: {
		    	top:'0%',
		    	textStyle: {
		    		color: 'rgba(255,255,255,.5)',
		    		fontSize:'12',
		    	}
		    },
		    grid: {
		        left: '10',
				top: '30',
		        right: '10',
		        bottom: '60',
		        containLabel: true
		    },

		    xAxis: [{
		        type: 'category',
		        boundaryGap: false,
		        axisLabel:  {
		                textStyle: {
		 					color: "rgba(255,255,255,.6)",
							fontSize:12,
		                },
		            },
		        axisLine: {
					lineStyle: { 
						color: 'rgba(255,255,255,.2)'
					}
		
		        },
		        data: ['1月', '2月', '3月', '4月']
		
		    }, {

		        axisPointer: {show: false},
		        axisLine: {show: false},
		        position: 'bottom',
		        offset: 20,
		
		    }],

		    yAxis: [{
		        type: 'value',
		        axisTick: {show: false},
		        axisLine: {
		            lineStyle: {
		                color: 'rgba(255,255,255,.1)'
		            }
		        },
		       axisLabel:  {
		                textStyle: {
		 					color: "rgba(255,255,255,.6)",
							fontSize:12,
		                },
		            },
		
		        splitLine: {
		            lineStyle: {
		                 color: 'rgba(255,255,255,.1)'
		            }
		        }
		    }],
		    series: [
				{
		        name: '采矿',
		        type: 'line',
		        smooth: true,
		        symbol: 'circle',
		        symbolSize: 5,
		        showSymbol: false,
		        lineStyle: {
		            normal: {
						color: 'red',
		                width: 2
		            }
		        },
		        areaStyle: {
		            normal: {
		                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
		                    offset: 0,
		                    color: 'rgba(1, 132, 213, 0.4)'
		                }, {
		                    offset: 0.8,
		                    color: 'rgba(1, 132, 213, 0.1)'
		                }], false),
		                shadowColor: 'rgba(0, 0, 0, 0.1)',
		            }
		        },
					itemStyle: {
					normal: {
						color: 'red',
						borderColor: 'rgba(221, 220, 107, .1)',
						borderWidth: 12
					}
				},
		        data: [3, 4, 3, 4]
		
		    }, 
		    {
		        name: '选矿',
		        type: 'line',
		        smooth: true,
		        symbol: 'circle',
		        symbolSize: 5,
		        showSymbol: false,
		        lineStyle: {
		            normal: {
						color: 'yellow',
		                width: 2
		            }
		        },
		        areaStyle: {
		            normal: {
		                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
		                    offset: 0,
		                    color: 'rgba(0, 216, 135, 0.4)'
		                }, {
		                    offset: 0.8,
		                    color: 'rgba(0, 216, 135, 0.1)'
		                }], false),
		                shadowColor: 'rgba(0, 0, 0, 0.1)',
		            }
		        },
					itemStyle: {
					normal: {
						color: 'yellow',
						borderColor: 'rgba(221, 220, 107, .1)',
						borderWidth: 12
					}
				},
		        data: [ 3, 7, 2, 5 ]
		
		    }, 
		    {
		        name: '水泥',
		        type: 'line',
		        smooth: true,
		        symbol: 'circle',
		        symbolSize: 5,
		        showSymbol: false,
		        lineStyle: {
		            normal: {
						color: 'blue',
		                width: 2
		            }
		        },
		        areaStyle: {
		            normal: {
		                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
		                    offset: 0,
		                    color: 'rgba(0, 216, 135, 0.4)'
		                }, {
		                    offset: 0.8,
		                    color: 'rgba(0, 216, 135, 0.1)'
		                }], false),
		                shadowColor: 'rgba(0, 0, 0, 0.1)',
		            }
		        },
					itemStyle: {
					normal: {
						color: 'blue',
						borderColor: 'rgba(221, 220, 107, .1)',
						borderWidth: 12
					}
				},
		        data: [5, 6, 4, 6]
		
		    },
		    {
		        name: '混凝土',
		        type: 'line',
		        smooth: true,
		        symbol: 'circle',
		        symbolSize: 5,
		        showSymbol: false,
		        lineStyle: {
		            normal: {
						color: 'green',
		                width: 2
		            }
		        },
		        areaStyle: {
		            normal: {
		                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
		                    offset: 0,
		                    color: 'rgba(0, 216, 135, 0.4)'
		                }, {
		                    offset: 0.8,
		                    color: 'rgba(0, 216, 135, 0.1)'
		                }], false),
		                shadowColor: 'rgba(0, 0, 0, 0.1)',
		            }
		        },
					itemStyle: {
					normal: {
						color: 'green',
						borderColor: 'rgba(221, 220, 107, .1)',
						borderWidth: 12
					}
				},
		        data: [1, 3, 5, 6]
		
		    },
		    
		    {
		        name: '国企',
		        type: 'bar',
		        barWidth:'8%', // 柱子宽度
		        data: [21, 23, 25, 26],
		        itemStyle: {
		            normal: {
		                color:'red',
		                opacity: 1,
						barBorderRadius: 5,
		            }
		        }
		    },
		    
		    {
		        name: '私企',
		        type: 'bar',
		        barWidth:'8%', // 柱子宽度
		        data: [10, 30, 50, 16],
			    itemStyle: {
		            normal: {
		                color:'green',
		                opacity: 1,
						barBorderRadius: 5,
		            }
		        }
		    },
		    
		 ]

};
      
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }
function echarts_3() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart3'));

        var dataStyle = {
			normal: {
				label: {
					show: false
				},
				labelLine: {
					show: false
				},
				// shadowBlur: 40,
				// shadowColor: 'rgba(40, 40, 40, 1)',
			}
        };
		var placeHolderStyle = {
			normal: {
				color: 'rgba(255,255,255,.05)',
				label: {show: false,},
				labelLine: {show: false}
			},
			emphasis: {
				color: 'rgba(0,0,0,0)'
			}
		};
		option = {
			color: ['red', 'yellow', 'blue', 'green'],
			tooltip: {
				show: true,
				formatter: "{a} : {c} "
			},
			legend: {
				itemWidth: 10,
		        itemHeight: 10,
				itemGap: 12,
				bottom: '18%',
				data: ['采铁', '选铁', '混凝土', '水泥'],
				textStyle: {color: 'rgba(255,255,255,.6)',}
			},
			
			series: [
				{
				name: '采铁',
				type: 'pie',
				clockWise: false,
				center: ['50%', '42%'],
				radius: ['59%', '70%'],
				itemStyle: dataStyle,
				hoverAnimation: false,
				data: [{
					value: 80,
					name: '01'
				}, {
					value: 20,
					name: 'invisible',
					tooltip: {show: false},
					itemStyle: placeHolderStyle
				}]
			},
				{
				name: '选铁',
				type: 'pie',
				clockWise: false,
				center: ['50%', '42%'],
				radius: ['49%', '60%'],
				itemStyle: dataStyle,
				hoverAnimation: false,
				data: [{
					value: 70,
					name: '02'
				}, {
					value: 30,
					name: 'invisible',
					tooltip: {show: false},
					itemStyle: placeHolderStyle
				}]
			}, 
				{
				name: '混凝土',
				type: 'pie',
				clockWise: false,
				hoverAnimation: false,
				center: ['50%', '42%'],
				radius: ['39%', '50%'],
				itemStyle: dataStyle,
				data: [{
					value: 65,
					name: '03'
				}, {
					value: 35,
					name: 'invisible',
					tooltip: {show: false},
					itemStyle: placeHolderStyle
				}]
			},
				{
				name: '水泥',
				type: 'pie',
				clockWise: false,
				hoverAnimation: false,
				center: ['50%', '42%'],
				radius: ['29%', '40%'],
				itemStyle: dataStyle,
				data: [{
					value: 60,
					name: '04'
				}, {
					value: 40,
					name: 'invisible',
					tooltip: {show: false},
					itemStyle: placeHolderStyle
				}]
			} ]
		};
      
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }

function echarts_7() {
	

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echart7'));

option = {
    tooltip: {
    trigger: 'axis',
    axisPointer: {
        lineStyle: {
            color: '#dddc6b'
        }
    }
},
	    legend: {
	    	top:'0%',
	    	textStyle: {
	    		color: 'rgba(255,255,255,.5)',
	    		fontSize:'12',
	    	}
},
grid: {
    left: '10',
	top: '30',
    right: '10',
    bottom: '10',
    containLabel: true
},

xAxis: [{
    type: 'category',
    boundaryGap: false,
axisLabel:  {
            textStyle: {
					color: "rgba(255,255,255,.6)",
				fontSize:12,
            },
        },
    axisLine: {
		lineStyle: { 
			color: 'rgba(255,255,255,.2)'
		}

    },

data: ['1月', '2月', '3月', '4月']

}, {

    axisPointer: {show: false},
    axisLine: {  show: false},
    position: 'bottom',
    offset: 20,

   

}],

yAxis: [{
    type: 'value',
    axisTick: {show: false},
    axisLine: {
        lineStyle: {
            color: 'rgba(255,255,255,.1)'
        }
    },
   axisLabel:  {
            textStyle: {
					color: "rgba(255,255,255,.6)",
				fontSize:12,
            },
        },

    splitLine: {
        lineStyle: {
             color: 'rgba(255,255,255,.1)'
        }
    }
}],
series: [ 
{
    name: '申报产量',
    type: 'line',
    smooth: true,
    symbol: 'circle',
    symbolSize: 5,
    showSymbol: false,
    lineStyle: {
		
        normal: {
			color: '#00d887',
            width: 2
        }
    },
    areaStyle: {
        normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(0, 216, 135, 0.4)'
            }, {
                offset: 0.8,
                color: 'rgba(0, 216, 135, 0.1)'
            }], false),
            shadowColor: 'rgba(0, 0, 0, 0.1)',
        }
    },
		itemStyle: {
		normal: {
			color: '#00d887',
			borderColor: 'rgba(221, 220, 107, .1)',
			borderWidth: 12
		}
	},
    data: [5, 3, 5, 6, 1, 5, 3, 5, 6, 4, 6, 4, 8, 3, 5, 6, 1, 5, 3, 7, 2, 5, 1, 4]

}, 

	 ]

};
  
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize",function(){
        myChart.resize();
    });
	
	
};


function echarts_8() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echart8'));

option = {
    tooltip: {
    trigger: 'axis',
    axisPointer: {
        lineStyle: {
            color: '#dddc6b'
        }
    }
},
	    legend: {
	    	top:'0%',
	    	textStyle: {
	    		color: 'rgba(255,255,255,.5)',
	    		fontSize:'12',
	    	}
},
grid: {
    left: '10',
	top: '30',
    right: '10',
    bottom: '10',
    containLabel: true
},

xAxis: [{
    type: 'category',
    boundaryGap: false,
axisLabel:  {
            textStyle: {
					color: "rgba(255,255,255,.6)",
				fontSize:12,
            },
        },
    axisLine: {
		lineStyle: { 
			color: 'rgba(255,255,255,.2)'
		}

    },

data: ['5月','6月','7月','8月','9月','10月','11月','12月','1月', '2月', '3月', '4月']

}, {

    axisPointer: {show: false},
    axisLine: {  show: false},
    position: 'bottom',
    offset: 20,

   

}],

yAxis: [{
    type: 'value',
    axisTick: {show: false},
    axisLine: {
        lineStyle: {
            color: 'rgba(255,255,255,.1)'
        }
    },
   axisLabel:  {
            textStyle: {
					color: "rgba(255,255,255,.6)",
				fontSize:12,
            },
        },

    splitLine: {
        lineStyle: {
             color: 'rgba(255,255,255,.1)'
        }
    }
}],
series: [
{
    name: '申报产量',
    type: 'line',
    smooth: true,
    symbol: 'circle',
    symbolSize: 5,
    showSymbol: false,
    lineStyle: {
		
        normal: {
			color: '#00d887',
            width: 2
        }
    },
    areaStyle: {
        normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(0, 216, 135, 0.4)'
            }, {
                offset: 0.8,
                color: 'rgba(0, 216, 135, 0.1)'
            }], false),
            shadowColor: 'rgba(0, 0, 0, 0.1)',
        }
    },
		itemStyle: {
		normal: {
			color: '#00d887',
			borderColor: 'rgba(221, 220, 107, .1)',
			borderWidth: 12
		}
	},
    data: [5, 5, 6, 1, 5, 3, 5, 6, 4, 6, 4, 8]

}, 

	 ]

};
  
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize",function(){
        myChart.resize();
    });
}



})



		
		
		
// 轮播图
let currentIndex = 0;
const images = document.querySelectorAll('#carousel img');
const totalImages = images.length;
const carouselWidth = images[0].clientWidth;
const carousel = document.getElementById('carousel');
 
function moveToImage(index) {
    carousel.style.transform = 'translateX(-${index * carouselWidth}px)';
}
 
function nextImage() {
    currentIndex = (currentIndex + 1) % totalImages;
    moveToImage(currentIndex);
}
 
function prevImage() {
    currentIndex = (currentIndex - 1 + totalImages) % totalImages;
    moveToImage(currentIndex);
}
 
// 自动播放功能
let interval = setInterval(nextImage, 1000); // 每3秒切换一次图片
 
// 鼠标悬停时停止自动播放，移开后继续播放
carousel.addEventListener('mouseenter', () => clearInterval(interval));
carousel.addEventListener('mouseleave', () => interval = setInterval(nextImage, 1000));
		




$(document).ready(function(){
	var html=$(".wrap ul").html()
	$(".wrap ul").append(html)
	var ls=$(".wrap li").length/2+1
	i=0
	ref = setInterval(function(){
		i++
		if(i==ls){
			i=1
			$(".wrap ul").css({marginTop:0})
			$(".wrap ul").animate({marginTop:-'.52'*i+'rem'},1000)
		}
    	$(".wrap ul").animate({marginTop:-'.52'*i+'rem'},1000)


	},2400);
});



